<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>成都杜甫草堂-实时信息</title>
    <link type="favicon" rel="shortcut icon" href="./static/img/favicon.ico" />
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/infoDisplay.css">
    <link href="./static/css/spop.min.css" rel="stylesheet"/>
    <script src="./static/js/Syunew6.js"></script>
    <script src="./static/js/isLogin.js"></script>
</head>
<body>
    <div class="info-box" id="infoDisplay">
        <div class="video-box" v-if="!showImg">
            <video style="min-width: 90%" :src="playurl" v-if="videos.length > 0" :loop="videos.length == 1" controls :autoplay="true" @ended="videoPlay()"></video>
            <!-- <video :src="playurl" v-if="videos.length > 0" controls :autoplay="true" @ended="videoPlay()"></video> -->
        </div>
        <div class="img-box" v-else>
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause=null>
                <div class="carousel-inner" role="listbox">
                    <div class="item" v-for="(item,i) in imgs"  :key="i" :class="i == 0 ? 'active' : ''">
                        <img :src="baseUrl + item" :ref="'img'+i">
                    </div>
                </div>
            </div>
        </div>
        <div class="info" v-show="showInfo">
            <div class="box1">
                <div class="time-weather">
                    <div class="time-box">
                        <div class="time">{{time}}</div>
                        <div class="date">{{date}}</div>
                    </div>
                    <!-- <div class="border"></div> -->
                    <div class="weather-box">
                        <div class="wea_img">
                            <img :src="weatherIconUrl" alt="">
                        </div>
                        <div class="wea">{{weather+ ' ' + temperature}}</div>
                    </div>
                </div>
                <div class="tourists" v-show="showModelType.number">
                    <div class="number">10000</div>
                    <div class="title">当前在馆游客</div>
                </div>
            </div>
            <div class="box2">
                <div class="content">
                    <div v-show="showModelType.narrator && showType == 'narrator'">
                        <div class="title">
                            <p>导游讲解</p>
                            <!-- <p></p> -->
                        </div>
                        <div class="con-box">
                            <div class="one-box">
                                <div class="p1">定时讲解：</div>
                                <div class="p1" v-if="door">{{door}} {{startTime}} 开始</div>
                                <div class="p1" v-else="door">暂无数据</div>
                            </div>
                            <div class="one-box">
                                <div class="p1">可约讲解员：</div>
                                <div class="p1">正门：{{narratorNum.zm}}人；北门：{{narratorNum.bm}}人；</div>
                                <div class="p1">东门：{{narratorNum.dm}}人；南门：{{narratorNum.nm}}人。</div>
                            </div>
                        </div>
                    </div>
                    <div v-show="showModelType.device && showType == 'device'">
                        <div class="title">
                            <p>剩余导览设备</p>
                        </div>
                        <div class="con-box">
                            <div class="one-box">
                                <div class="p1">语音导览机：</div>
                                <div class="p1">正门：{{deviceData1.zm}}台；北门：{{deviceData1.bm}}台；</div>
                                <div class="p1">东门：{{deviceData1.dm }}台；南门：{{deviceData1.nm}}台。</div>
                            </div>
                            <div class="one-box">
                                <div class="p1">平板导览机：</div>
                                <div class="p1">正门：{{deviceData2.zm}}台；北门：{{deviceData2.bm}}台；</div>
                                <div class="p1">东门：{{deviceData2.dm}}台；南门：{{deviceData2.nm}}台。</div>
                            </div>
                        </div>
                    </div>
                    <div class="msg-box" v-show="((showModelType.msg || showModelType.active) && (showType == 'msg' || showType == 'active'))">
                        <div class="real" v-if="(showModelType.msg && showInfo) && (showType == 'msg' || showType == 'active')">
                            <p class="msg-title">实时信息公告：</p>
                            <marquee behavior="scroll">{{notice}}</marquee>
                        </div>
                        <div class="trailer" v-if="(showModelType.active && showInfo) && (showType == 'msg' || showType == 'active')">
                            <p class="msg-title">最新活动预告：</p>
                            <marquee behavior="scroll">{{trailer}}</marquee>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="box3"></div> -->
        </div>
        <!-- 确认全屏弹出框 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    本页面推荐使用全屏显示！</br>(点击确认按钮开启全屏模式，或者按键盘F11按键手动开启/关闭全屏模式)
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="fullScreen">确认</button>
                </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script>
        // let videos = ['01.mp4']
        var infoDisplay = new Vue({
            el: '#infoDisplay',
            data() {
                return {
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy/MM/dd'),
                    week: this.timeFormat('D'),
                    baseUrl: api.baseUrl,
                    userData: store.fetch('userLoginInfo'),
                    weatherData: '',
                    weatherIconUrl: '',
                    temperature: '',
                    weather: '',
                    complete: false,
                    imgs: [],
                    videos: [],
                    playurl: '',
                    playi: 0,
                    showImg: true,
                    showInfo: true,
                    notice: '',
                    trailer: '',
                    showModelType: {
                        msg: true,
                        active: true,
                        narrator: true,
                        device: true,
                        number: true
                    },
                    showTypeArr: [],
                    showIndex: 0,
                    showType: 'msg',
                    deviceData1: {
                        zm: '--',
                        bm: '--',
                        dm: '--',
                        nm: '--'
                    },
                    deviceData2: {
                        zm: '--',
                        bm: '--',
                        dm: '--',
                        nm: '--'
                    },
                    narratorNum: {
                        zm: '--',
                        bm: '--',
                        dm: '--',
                        nm: '--'
                    },
                    door: '',
                    startTime: ''
                }
            },
            created() {

            },
            mounted() {
                // this.fullScreen();
                this.init()
                // this.modalSow();
                // this.getDate();
                this.getWeather();
                // this.videoPlay();
                // this.showInfoControl()
            },
            methods: {
                //初始化
                init() {
                    this.modalShow();
                    this.getInfo();
                    this.getDate();
                    // this.getLeaseData()
                },
                // 确认全屏
                modalShow() {
                    $('#myModal').modal('show');
                },
                //全屏
                fullScreen() {
                    var el = document.documentElement;
                    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;      
                    if(typeof rfs != "undefined" && rfs) {
                        rfs.call(el);
                    };
                    $('#myModal').modal('hide');
                    return;
                },

                //显示信息切换
                showInfoControl() {
                    let _vm = this;
                    // _vm.showInfo = true;
                    window.setTimer = setInterval(() => {
                        if(this.showIndex == (this.showTypeArr.length - 1)) {
                            this.showIndex = 0;
                            this.showInfo = false;
                            clearInterval(window.setTimer);
                            window.setTimer1 = setTimeout(() => {
                                this.showInfo = true;
                                _vm.getInfo();
                            },1000 * this.showTime)
                        }else {
                            this.showIndex ++;
                        }
                        this.showType = this.showTypeArr[this.showIndex];
                    }, 1000 * this.showTime)
                },
                //时间格式化
                timeFormat(fmt,time='') {
                    if(time) {
                        var date = new Date(time);
                    }else {
                        var date = new Date();
                    }
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    }
                    var o = { 
                        "M+" : date.getMonth()+1,     //月份 
                        "d+" : date.getDate(),     //日 
                        "h+" : date.getHours(),     //小时 
                        "m+" : date.getMinutes(),     //分 
                        "s+" : date.getSeconds(),     //秒 
                        "q+" : Math.floor((date.getMonth()+3)/3), //季度 
                        "S" : date.getMilliseconds(),    //毫秒
                        "D" : week[date.getDay()]
                    }; 
                    if(/(y+)/.test(fmt)) 
                    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
                    for(var k in o) 
                    if(new RegExp("("+ k +")").test(fmt)) 
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
                    return fmt;
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy/MM/dd');
                        this.week = this.timeFormat('D')
                    },1000)
                },

                //登出
                logout() {
                    store.clear('userData');
                    store.clear('userLoginInfo')
                    window.location.href = '/login.html'
                },

                //获取天气
                getWeather() {
                    let _vm = this;
                    if(localStorage.getItem('weatherHourList') || 0) {
                        let weatherData = JSON.parse(localStorage.getItem('weatherHourList'));
                        if(weatherData.errcode !== 100) {
                            console.log(weatherData)
                            let saveTime = weatherData.saveTime;
                            let nowTime = this.timeFormat('yyyyMMdd');
                            if(saveTime == nowTime) {
                                this.weatherData = weatherData;
                                //立即渲染天气
                                this.updateWeather();
                                //每小时更新一次天气
                                setTimeout(() => {
                                    this.getWeather();
                                },1000 * 60 * 60);
                                return false;
                            }
                        }
                    }
                    $.ajax({
                        type: 'GET',
                        url: 'https://www.tianqiapi.com/api/',
                        data: 'version=v1&city=成都&appid=16633712&appsecret=A5sc2f5k',
                        dataType: 'JSON',
                        error: function () {
                            alert('网络错误');
                        },
                        success: function (res) {
                            let saveTime = _vm.timeFormat('yyyyMMdd');
                            res.saveTime = saveTime;
                            let weatherData = JSON.stringify(res);
                            window.localStorage.setItem('weatherHourList',weatherData);
                            _vm.weatherData = res;
                            _vm.updateWeather()
                        }
                    });
                },

                //渲染天气
                updateWeather() {
                    // this.weatherIconUrl = './static/img/icon/day/' + this.weatherHourList[this.timeFormat('hh') > 9 ? this.timeFormat('hh') : this.timeFormat('h')].weather_code + '.png';
                    // this.temperature = this.weatherHourList[this.timeFormat('hh') > 9 ? this.timeFormat('hh') : this.timeFormat('h')].temperature;
                    // this.weather = this.weatherHourList[this.timeFormat('hh') > 9 ? this.timeFormat('hh') : this.timeFormat('h')].weather;
                    // this.complete = true;
                    this.weatherIconUrl = './static/img/icon/weather/' + this.weatherData.data[0].wea_img + '.png';
                    this.temperature = this.weatherData.data[0].tem;
                    this.weather = this.weatherData.data[0].wea;
                },

                videoPlay() {
                    let baseUrl = this.baseUrl;
                    // let baseUrl = './static/video/';//本地
                    this.playurl = baseUrl + this.videos[this.playi];
                    if (this.videos.length == 0) {
                        return false;
                    }
                    if(this.playi < this.videos.length -1) {
                        this.playi ++;
                    }else {
                        this.playi = 0
                    }
                },

                //获取数据
                getInfo() {
                    let querys = this.getQuery();
                    if(querys.preview == '1') {
                        this.imgs = querys.imgs.split(',');
                        this.videos = querys.videos.split(',');
                        this.notice = querys.notice;
                        this.trailer = querys.trailer;
                        this.showModelType = JSON.parse(querys.type);
                        this.showTime = querys.showTime;
                        for (const key in this.showModelType) {
                            if(this.showModelType[key] && key != 'number') {
                                this.showTypeArr.push(key)
                            }
                        }
                        this.showType = this.showTypeArr[0];
                        // this.showTime = querys.showTime;
                        if(querys.showType == '1') {
                            this.showImg = true
                        }else {
                            this.showImg = false
                            this.videoPlay()
                        }
                        this.showInfoControl()
                    }else {
                        api.getPublish().then(res => {
                            if(res.data.status == 'success') {
                                let data = res.data.data;
                                this.imgs = data.imgName.split(',');
                                this.videos = data.videoName.split(',');
                                this.notice = data.content;
                                this.trailer = data.newContent;
                                this.showModelType = {
                                    msg: data.type.split(',')[0] === '0' ? false : true,
                                    active: data.type.split(',')[1] === '0' ? false : true,
                                    narrator: data.type.split(',')[2] === '0' ? false : true,
                                    device: data.type.split(',')[3] === '0' ? false : true,
                                    number: data.type.split(',')[4] === '0' ? false : true
                                };
                                this.showTypeArr = [];
                                for (const key in this.showModelType) {
                                    if(this.showModelType[key] && key != 'number') {
                                        this.showTypeArr.push(key)
                                    }
                                }
                                this.showType = this.showTypeArr[0];
                                this.showTime = data.showTime;
                                if(data.showType == '1') {
                                    this.showImg = true
                                }else {
                                    this.showImg = false;
                                    this.videoPlay()
                                }
                                this.showInfoControl()
                            }
                        })
                    }

                    var getData = (data) => {
                        let zm = '正门';
                        let bm = '北门';
                        let dm = '东门';
                        let nm = '南门';
                        for (const item of data) {
                            if(item.inwardOutward == zm) {
                                this.narratorNum.zm = item.onlineCommtatorCount || '--';
                                // this.deviceData1.zm = item.explainLeaseCount ? item.explainCount - item.explainLeaseCount : '--';
                                // this.deviceData2.zm = item.ipadLeaseCount ? (item.ipadCount - item.ipadLeaseCount) : '--';
                            }
                            if(item.inwardOutward == bm) {
                                this.narratorNum.bm = item.onlineCommtatorCount || '--';
                                // this.deviceData1.bm = item.explainLeaseCount ? item.explainCount - item.explainLeaseCount : '--';
                                // this.deviceData2.bm = item.ipadLeaseCount ? (item.ipadCount - item.ipadLeaseCount) : '--';
                            }
                            if(item.inwardOutward == dm) {
                                this.narratorNum.dm = item.onlineCommtatorCount || '--';
                                // this.deviceData1.dm = item.explainLeaseCount ? item.explainCount - item.explainLeaseCount : '--';
                                // this.deviceData2.dm = item.ipadLeaseCount ? (item.ipadCount - item.ipadLeaseCount) : '--';
                            }
                            if(item.inwardOutward == nm) {
                                this.narratorNum.nm = item.onlineCommtatorCount || '--';
                                // this.deviceData1.nm = item.explainLeaseCount ? item.explainCount - item.explainLeaseCount : '--';
                                // this.deviceData2.nm = item.ipadLeaseCount ? (item.ipadCount - item.ipadLeaseCount) : '--';
                            }
                        }
                    }

                    let body = {
                        startDate: this.timeFormat('yyyy-MM-dd'),
                        endDate: this.timeFormat('yyyy-MM-dd'),
                        pageNum: 1,
                        pageSize: 10
                    };
                    api.讲解工作查询(body).then(res => {
                        if(res.data.status == 'success') {
                            getData(res.data.data.list)
                        }
                    })
                    
                    let sortByKey = (arr,key) => {
                        return arr.sort((a,b) => {
                            let x=a[key];
                            let y=b[key];
                            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
                        })
                    }

                    let body3 = {
                        pageNum: 1,
                        pageSize: 20
                    };
                    api.查询所有日志(body3).then(res => {
                        let newArr = [];
                        for (const item of res.data.data.list) {
                            if(item.nextTime) {
                                item.nextTimer = new Date(item.nextTime).valueOf() - new Date().valueOf()
                                item.nextDate = this.timeFormat('yyyy-MM-dd',item.nextTime)
                                if(item.nextDate == this.timeFormat('yyyy-MM-dd') && item.nextTimer > 0) {
                                    newArr.push(item)
                                }
                            }
                        }
                        if(newArr.length==0) {
                            return false;
                        }
                        newArr = sortByKey(newArr,'nextTimer');
                        let doorData = newArr[0];
                        this.door = doorData.entryExit;
                        this.startTime = this.timeFormat('hh:mm',doorData.nextTime)
                    }).catch(err => {
                        console.error(err)
                    })
                    this.getLeaseData()
                },

                //获取剩余设备
                getLeaseData() {
                    api.getLease().then(res => {
                        if(res.data.status == 'success') {
                            this.deviceData1.zm = res.data.data[0].mainLeaseNum || '--';
                            this.deviceData1.bm = res.data.data[0].northLeaseNum || '--';
                            this.deviceData1.dm = res.data.data[0].eastLeaseNum || '--';
                            this.deviceData1.nm = res.data.data[0].southLeaseNum || '--';
                            this.deviceData2.zm = res.data.data[1].mainLeaseNum || '--';
                            this.deviceData2.bm = res.data.data[1].northLeaseNum || '--';
                            this.deviceData2.dm = res.data.data[1].eastLeaseNum || '--';
                            this.deviceData2.nm = res.data.data[1].southLeaseNum || '--';
                        }
                    })
                },

                //获取url参数
                getQuery() {
                    var url = decodeURI(location.search); //获取url中"?"符后的字串
                    var theRequest = new Object();  
                    if (url.indexOf("?") != -1) {  
                        var str = url.substr(1);  
                        strs = str.split("&");  
                        for(var i = 0; i < strs.length; i ++) {  
                            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
                        }  
                    }  
                    return theRequest;
                },

                //图片控制
                imgControl(e) {
                    let imgRef = this.$refs['img'+e];
                    if(imgRef[0].naturalWidth > imgRef[0].naturalHeight) {
                        imgRef[0].style.width = '100%';
                    }else {
                        imgRef[0].style.height = '100%';
                    }
                },
            }
        })
    </script>
</body>